<template>
  <div class="cardlist">
    <div class="card" v-for="item in card" :key="item.id">
      <dv-border-box-2>
        <h3>{{ item.title }}</h3>
        <div>用户名：{{ item.cardname }}</div>
        <div>性别：{{ item.sex }}</div>
        <div>价格：{{ item.price }}</div>
        <div>职业：{{ item.job }}</div></dv-border-box-2
      >
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      card: [
        {
          id: 1,
          title: "画师",
          cardname: "wxy",
          sex: "女",
          price: "5000",
          job: "画师",
        },
        {
          id: 2,
          title: "视频剪辑",
          cardname: "wxy",
          sex: "女",
          price: "5000",
          job: "画师",
        },
        {
          id: 3,
          title: "网页设计",
          cardname: "wxy",
          sex: "女",
          price: "5000",
          job: "画师",
        },
        {
          id: 4,
          title: "财务管理",
          cardname: "wxy",
          sex: "女",
          price: "5000",
          job: "画师",
        },
        {
          id: 5,
          title: "摄影",
          cardname: "wxy",
          sex: "女",
          price: "5000",
          job: "画师",
        },
      ],
    };
  },
};
</script>

<style lang="less" scoped>
.cardlist {
  display: flex;
  .card {
    display: flex;
    flex-direction: column;
    width: 320px;
    height: 300px;
    background-color: #fff;
    margin: 10px 20px;
    border-radius: 5%;
    box-shadow: 0 0 5px #efe;
    > div,
    h3 {
      display: inline-block;
      width: 250px;
      height: 40px;
      font-size: 16px;
      //   font-style: asin();
    }
  }
}
</style>
